<template>
  <scroll-view scroll-y="true">
    <div class="page">
      <div class="section pitch_sm last-pitch_clear p_default">
        <div class="align-items_center">
          <div>
            <van-image round width="2rem" height="2rem" :src="good.avatar" />
          </div>
          <div class="flex px_sm">
            <p class="username">{{ good.username }}</p>
          </div>
        </div>
        <div class="">
          <div class="price h3">
            <small class="dollar">¥</small>{{ good.price
            }}<small class="unit" v-if="good.unit">/{{ good.unit }}</small>
          </div>
        </div>
        <div class="row">{{ good.description }}</div>
        <div class="row">
          <van-image
            v-for="item in good.pictures"
            :key="item"
            width="100%"
            fit="cover"
            position="center"
            :src="item"
          />
        </div>
      </div>
    </div>
    <Footer />
  </scroll-view>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { Footer } from '@/components';

import { useGood } from '@/hooks/index';

export default defineComponent({
  name: 'Detail',
  components: {
    Footer,
  },
  setup() {
    const { good } = useGood();

    return {
      good,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.page {
  margin-bottom: 50px;
}
.price {
  font-weight: bold;
  color: #ff4f24;
  .dollar {
    font-size: 12px;
  }
  .unit {
    font-size: 14px;
  }
}
</style>
